<template>
  <Dialog
    :visible="diaologVisible"
    :dialogConfig="dialogConfig"
    @close="closeDialog"
  >
    <template #content>
      <el-table
        :data="tableData"
        :border="true"
        height="500px"
        v-loading="loading"
        element-loading-text="加载中..."
      >
        <el-table-column prop="skuName" label="sku名称" />
        <el-table-column prop="price" label="sku价格" />
        <el-table-column prop="weight" label="sku重量" />
        <el-table-column prop="logoUrl" label="品牌LOGO">
          <template #default="{ row }">
            <img :src="row.skuDefaultImg" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
      </el-table>
    </template>
  </Dialog>
</template>

<script setup lang="ts" name="SkuModal">
import { ref, reactive, onMounted } from 'vue'
import { querySkuReq } from '@/api/product/spu'
import { ElMessage } from 'element-plus'

let props = defineProps(['spuId'])

let tableData = reactive<any>([])
let loading = ref(true)
let diaologVisible = ref(true)
let dialogConfig = reactive<any>({
  dialogTitle: 'SKU列表',
  dialogWidth: '800px',
  dialogShowClose: true,
  dialogModal: true,
  dialogAlignCenter: false,
  dialogContentCenter: false,
  dialogClickModalClose: true,
  dialogESCModalClose: true,
  dialogDraggable: false,
  dialogFooterBtn: false
})
let emits = defineEmits(['close'])

// 查询SKU list
const getSkuList = async (id: any) => {
  let res: any = await querySkuReq(id)
  if (res.code === 200) {
    tableData = res.data
    loading.value = false
  } else {
    ElMessage.error(res.message)
    loading.value = false
  }
}

// 关闭
const closeDialog = () => {
  emits('close', false)
}

onMounted(() => {
  console.log('props', props)
  getSkuList(props.spuId)
})
</script>

<style scoped></style>
